<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
	html,
	body,
	div,
	span,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	pre,
	a,
	code,
	em,
	img,
	small,
	strong,
	sub,
	sup,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label {
		margin: auto;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent
	}

	h2 {
		text-align: center;
		padding: 10px;
		font-size: 20px;
	}

	a {
		color: #007bc4
			/*#424242*/
		;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline
	}

	ol,
	ul {
		list-style: none
	}

	table {
		border-collapse: collapse;
		border-spacing: 0
	}

	body {
		height: 100%;
		font: 12px sans-serif;
		color: #51555C;
		background: #2C2C2C
	}

	#main_demo {
		width: 910px;
		min-height: 600px;
		margin: 30px auto 0 auto;
		background: #fff;
		-moz-border-radius: 12px;
		-khtml-border-radius: 12px;
		-webkit-border-radius: 12px;
		border-radius: 12px;
	}

	#results {
		font: 12px Arial, Helvetica, sans-serif;
		width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	#results .loading-indication {
		background: #FFFFFF;
		padding: 10px;
		position: absolute;
	}

	.paginate {
		padding: 0px;
		margin: 0px;
		height: 30px;
		display: block;
		text-align: center;
	}

	.paginate li {
		display: inline-block;
		list-style: none;
		padding: 0px;
		margin-right: 1px;
		width: 30px;
		text-align: center;
		background: #4CC2AF;
		line-height: 25px;
	}

	.paginate .active {
		display: inline-block;
		list-style: none;
		padding: 0px;
		margin-right: 1px;
		width: 30px;
		text-align: center;
		line-height: 25px;
		background-color: #666666;
	}

	.paginate li a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.page_result {
		padding: 0px;
	}

	.page_result li {
		background: #E4E4E4;
		margin-bottom: 5px;
		padding: 10px;
		height: 20px;
		font-size: 12px;
		list-style: none;
	}

	.page_result .page_name {
		font-size: 14px;
		font-weight: bold;
		margin-right: 5px;
	}
</style>
<script>
	//请求路径  http://255.255.255.255/AJAX/football?pageNo=1    
	//该地址请求多条微博信息，分页获取，pageNo指定获取第几页的数据
	window.onload = function () {
		var loadmore = document.getElementById("load_more_button");
		var oUL = document.getElementById("page_result");
		loadmore.onclick = function () {
			var request = new XMLHttpRequest();
			request.open("get", "http://localhost:9090/tweets");
			request.onload = function () {
				var list = JSON.parse(request.response);
				list.forEach(element => {
					let li = document.createElement("li");
					let span = document.createElement("span");
					span.innerText = element.msg;
					li.appendChild(span);
					oUL.appendChild(li);
				});

			}
			request.send();
		}
	}
</script>

<body>
	<div id="main_demo">
		<div id="results">
			<ul id="page_result" class="page_result">
				<li id="item_146">
					<span class="message_left">bbbbbbbbbb</span>
				</li>
				<li id="item_145">
					<span class="message_left">bbbbbbbbbb</span>
				</li>
				<li id="item_145">
					<span class="message_left">bbbbbbbbbb</span>
				</li>
			</ul>
			<div align="center">
				<button class="load_more" id="load_more_button" style="display: inline-block;">load More</button>
			</div>
		</div>
	</div>
</body>

</html>